function registerClickCallback() {
    var btnHome = document.querySelector("#btnHome");
    var btnFind = document.querySelector("#btnFind");
    var btnSimulate = document.querySelector("#btnSimulate");
    var btnData = document.querySelector("#btnData");
    var btnAbout = document.querySelector("#btnAbout");
    var iframe = document.querySelector("#my_iframe");
    btnHome.addEventListener('click', function() {
        let className = iframe.className;
        if (className.includes("show")) {
            iframe.className = className.slice(0, className.length - 5) + ' hide';
        }
        setTimeout(function() {
            iframe.setAttribute("src", "./schoolCard.html");
            iframe.className = className.slice(0, className.length - 5) + ' show';
        }, 600);

    });
    btnFind.addEventListener('click', function() {
        let className = iframe.className;
        if (className.includes("show")) {
            iframe.className = className.slice(0, className.length - 5) + ' hide';
        }
        setTimeout(function() {
            iframe.setAttribute("src", "./miniCardList.html");
            iframe.className = className.slice(0, className.length - 5) + ' show';
        }, 600);


    });
    btnSimulate.addEventListener('click', function() {
        let className = iframe.className;
        if (className.includes("show")) {
            iframe.className = className.slice(0, className.length - 5) + ' hide';
        }
        setTimeout(function() {
            iframe.setAttribute("src", "./cardList.html");
            iframe.className = className.slice(0, className.length - 5) + ' show';
        }, 600);

    });
    btnData.addEventListener('click', function() {
        let className = iframe.className;
        if (className.includes("show")) {
            iframe.className = className.slice(0, className.length - 5) + ' hide';
        }
        setTimeout(function() {
            iframe.setAttribute("src", "./inputCard.html");
            iframe.className = className.slice(0, className.length - 5) + ' show';
        }, 600);

    });
    btnAbout.addEventListener('click', function() {
        let className = iframe.className;
        if (className.includes("show")) {
            iframe.className = className.slice(0, className.length - 5) + ' hide';
        }
        setTimeout(function() {
            iframe.setAttribute("src", "./about.html");
            iframe.className = className.slice(0, className.length - 5) + ' show';
        }, 600);


    });

}

registerClickCallback();